<template>
<div class="app-container">
   
    <!--查询表单-->
       <!--查询表单-->
    <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="添加时间">
            <el-date-picker
            v-model="researchQuery.hStart"
            type="datetime"
            placeholder="选择开始时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            default-time="00:00:00"
            />
        </el-form-item>
        <el-form-item>
            <el-date-picker
            v-model="researchQuery.hEnd"
            type="datetime"
            placeholder="选择截止时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            default-time="00:00:00"
            />
        </el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
        <el-button type="default" @click="resetData()">清空</el-button>
    </el-form>
       <!-- 导出excel --> 
      <el-row>
         <el-button size="mini" icon="el-icon-download" type="primary" @click="download"
          >导出表格</el-button
        >
      </el-row>
<!-- 表格 -->
    <el-table
            :data="list"
            stripe
            border
            fit
            highlight-current-row>
        <el-table-column v-for="column in tableColumns" :key="column.prop" :prop="column.prop" :label="column.label" :min-width="column.minWidth"/>

    </el-table>
    
</div>
</template>
<script>
import request from "@/utils/request";
import {dataHandler,downloadExcel} from "@/utils/aboutExcel.js"

export default {
    //写核心代码位置
    data(){//定义变量和初始值
        return{   
            researchQuery: {hadmin:""},
            list: null,
            tableColumns:[
                { prop: 'util', label: '学院', minWidth: '80' },
                { prop: 'discipline', label: '学科', minWidth: '80' },
                { prop: 'score1', label: '教学工程-专业项目', minWidth: '80' },
                { prop: 'score2', label: '教学工程-课程项目', minWidth: '80' },
                { prop: 'score3', label: '教学工程-实践创新-省级以上实验教学项目', minWidth: '80' },
                { prop: 'score4', label: '教学工程-实践创新-省级以上校外实践基地', minWidth: '80' },
                { prop: 'score5', label: '教学工程-实践创新-省级以上大学生创新创业项目', minWidth: '80' },
                { prop: 'score6', label: '教学工程-教学团队', minWidth: '80' },
                { prop: 'score7', label: '教学工程-教学名师', minWidth: '80' },
                { prop: 'score8', label: '教学工程-研究生项目（4个）', minWidth: '80' },
                { prop: 'score9', label: '教学研究-教改项目', minWidth: '80' },
                { prop: 'score10', label: '教学研究-规划教材', minWidth: '80' },
                { prop: 'score11', label: '教学研究-教学成果', minWidth: '80' },
                { prop: 'score12', label: '教学竞赛', minWidth: '80' },
                { prop: 'score13', label: '指导学生-学科竞赛', minWidth: '80' },
                { prop: 'score14', label: '指导学生-学术论文', minWidth: '80' },
                { prop: 'score15', label: '指导学生-知识产权', minWidth: '80' },
                { prop: 'score16', label: '合计', minWidth: '80' }
                ]

           
        }
    },
    async created(){//页面渲染之前执行，一般执行methods方法
        await this.getList()
    },
    methods:{//调用方法
        async getList(){
            let userinfo = JSON.parse(sessionStorage.getItem("userInfo"));
            this.researchQuery.hadmin = userinfo.userId
            let data = await request({
                    url:"/excel/showPerformance",
                    method:"post",
                    data:this.researchQuery
                  }) 
                  this.list = data.data
        },
        resetData(){//清空的方法
            //表单输入项清空
            this.researchQuery={}
            //查所有
            this.getList()
        },
        download(){
            downloadExcel(dataHandler(this.list,this.tableColumns),"教学业绩统计.xlsx")
        }
        
  
    }

}
</script>